<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/style.css" rel="stylesheet" />
		<style type="text/css" media="all">
			.qty_input {
				text-align: center;
			}
			.qty_input input[type="number"],
			input[type="text"] {
				margin-bottom: 0px;
				padding-top: 0px;
				padding-bottom: 0px;
				padding-left: 0px;
				padding-right: 0px;
				text-align: center;
				border: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">CW001</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" style="height: 65%;">
				<li class="mui-table-view-cell">
					产品: {{item.name}}, 总量: {{item.qty}}
				</li>
				<li class="mui-table-view-cell">
					当前库存
					<table class="qty_input" border="1">
						<tr>
							<td width="50px"></td>
							<td v-repeat="item.attributes[1].values">
								{{$value|uppercase}}
							</td>
							<td>
							</td>
						</tr>
						<tr v-repeat="attribute0:item.attributes[0].values">
							<td>{{attribute0}}</td>
							<td v-repeat="attribute1:item.attributes[1].values">
								<input type="number" v-model="item.qtys[attribute0][attribute1]" v-on="tap: qtyInput($event,attribute0,attribute1)" disabled="" />
							</td>
							<td style="color: #008000;">
								<input type="number" value="17" disabled="" />
							</td>
						</tr>
						<tr style="color: #1B8D1D;">
							<td></td>
							<td><input type="number" disabled="" value="2" /></td>
							<td><input type="number" disabled="" value="4" /></td>
							<td><input type="number" disabled="" value="8" /></td>
							<td><input type="number" disabled="" value="4" /></td>
							<td><input type="number" disabled="" value="8" /></td>
							<td><input type="number" disabled="" value="8" /></td>
							<td><input type="number" disabled="" value="34" /></td>
						</tr>
					</table>
				</li>
				<li class="mui-table-view-cell">
					预估库存
					<table class="qty_input" border="1">
						<tr>
							<td width="50px"></td>
							<td v-repeat="item.attributes[1].values">
								{{$value|uppercase}}
							</td>
						</tr>
						<tr v-repeat="attribute0:item.attributes[0].values">
							<td>{{attribute0}}</td>
							<td v-repeat="attribute1:item.attributes[1].values">
								<input type="number" v-model="item.qtys[attribute0][attribute1]" v-on="tap: qtyInput($event,attribute0,attribute1)" disabled="" />
							</td>
						</tr>
					</table>
				</li>
				<li class="mui-table-view-cell">
					待出库
					<table class="qty_input" border="1">
						<tr>
							<td width="50px"></td>
							<td v-repeat="item.attributes[1].values">
								{{$value|uppercase}}
							</td>
						</tr>
						<tr v-repeat="attribute0:item.attributes[0].values">
							<td>{{attribute0}}</td>
							<td v-repeat="attribute1:item.attributes[1].values">
								<input type="number" v-model="item.qtys[attribute0][attribute1]" v-on="tap: qtyInput($event,attribute0,attribute1)" disabled="" />
							</td>
						</tr>
					</table>
				</li>
				<li class="mui-table-view-cell">
					待入库
					<table class="qty_input" border="1">
						<tr>
							<td width="50px"></td>
							<td v-repeat="item.attributes[1].values">
								{{$value|uppercase}}
							</td>
						</tr>
						<tr v-repeat="attribute0:item.attributes[0].values">
							<td>{{attribute0}}</td>
							<td v-repeat="attribute1:item.attributes[1].values">
								<input type="number" v-model="item.qtys[attribute0][attribute1]" v-on="tap: qtyInput($event,attribute0,attribute1)" disabled="" />
							</td>
						</tr>
					</table>
				</li>

			</ul>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../app/vue-html5.js"></script>
		<script type="text/javascript" charset="utf-8">
			var time0 = Date.now();
			(function($, window, document, Vue, vm) {
				window.vm = vm = new Vue.PageVm({
					el: '.mui-content',
					name: 'page name',
					//host: localStorage['setting:host'],
					data: function() {
						return {
							item: {
								id: 1,
								name: 'CW001',
								price: 300,
								attributes: [{
									attribute: 'color',
									values: ['red', 'green']
								}, {
									attribute: 'size',
									values: ['s', 'm', 'l', 'xl', 'xxl', '3xl']
								}],
								qty: 34,
								qtys: {
									red: {
										s: 1,
										m: 2,
										l: 4,
										xl: 2,
										xxl: 4,
										'3xl': 4
									},
									green: {
										s: 1,
										m: 2,
										l: 4,
										xl: 2,
										xxl: 4,
										'3xl': 4
									},
								}
							}
						};
					},
					computed: {},
					watch: {},
					created: function() {
						var self = this;
						//									this.load();
					},
					plusReady: function() {
						var self = this;
						//vm.$currentWebView = plus.webview.currentWebview();
					},
					attached: function() {
						$.init({});
						var time1 = Date.now();
						$.plusReady(function() {
							console.log('%s time:%d,%d', vm.$options.name, time1 - time0, Date.now() - time0)
						});
					},
					events: {
						show: function(data) {
							console.log('show ', JSON.stringify(data));
						}
					},
					filters: {},
					methods: {
						load: function() {
							var self = this;
							$.ajax(self.$options.host + '/model', {
								timeout: 2000,
								success: function(data) {
									self.list = data;
								},
								error: function(xhr, type, errorThrown) {
									Vue.plusReadyDo(function() {
										plus.nativeUI.alert('连接服务器异常');
									});
								}
							});
						},
					},
					mixins: []
				});
			})(mui, window, document, Vue, window.vm = {});
		</script>
	</body>

</html>